<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>说一说从输入URL到页面呈现发生了什么？——解析算法篇 | yanyan</title>
    <meta name="description" content="Yan&#39;s blog">
    <meta name="generator" content="VuePress 1.4.0">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    
    <link rel="preload" href="/assets/css/0.styles.e1b3f17d.css" as="style"><link rel="preload" href="/assets/js/app.e358a08d.js" as="script"><link rel="preload" href="/assets/js/2.88fa18d1.js" as="script"><link rel="preload" href="/assets/js/25.4c092e0a.js" as="script"><link rel="prefetch" href="/assets/js/10.23baf844.js"><link rel="prefetch" href="/assets/js/11.45c148ba.js"><link rel="prefetch" href="/assets/js/12.e5930132.js"><link rel="prefetch" href="/assets/js/13.0547cd14.js"><link rel="prefetch" href="/assets/js/14.3e67795b.js"><link rel="prefetch" href="/assets/js/15.51129890.js"><link rel="prefetch" href="/assets/js/16.6987f89d.js"><link rel="prefetch" href="/assets/js/17.2807cff5.js"><link rel="prefetch" href="/assets/js/18.855e1707.js"><link rel="prefetch" href="/assets/js/19.6da24791.js"><link rel="prefetch" href="/assets/js/20.e24d4aef.js"><link rel="prefetch" href="/assets/js/21.6efc6fba.js"><link rel="prefetch" href="/assets/js/22.10447f0f.js"><link rel="prefetch" href="/assets/js/23.9154cc24.js"><link rel="prefetch" href="/assets/js/24.9ad529fc.js"><link rel="prefetch" href="/assets/js/26.debdaa01.js"><link rel="prefetch" href="/assets/js/27.8b90b660.js"><link rel="prefetch" href="/assets/js/28.1a323e01.js"><link rel="prefetch" href="/assets/js/29.6f108fc9.js"><link rel="prefetch" href="/assets/js/3.7210d3aa.js"><link rel="prefetch" href="/assets/js/30.e7df1937.js"><link rel="prefetch" href="/assets/js/31.2cb3120f.js"><link rel="prefetch" href="/assets/js/32.eb64932c.js"><link rel="prefetch" href="/assets/js/33.cac3e2f0.js"><link rel="prefetch" href="/assets/js/34.19ea35c4.js"><link rel="prefetch" href="/assets/js/35.fadf5d03.js"><link rel="prefetch" href="/assets/js/36.88b681f1.js"><link rel="prefetch" href="/assets/js/37.2a799db9.js"><link rel="prefetch" href="/assets/js/38.2741a2bf.js"><link rel="prefetch" href="/assets/js/39.359ceb72.js"><link rel="prefetch" href="/assets/js/4.9e938666.js"><link rel="prefetch" href="/assets/js/40.56fd4a10.js"><link rel="prefetch" href="/assets/js/41.e72117ad.js"><link rel="prefetch" href="/assets/js/42.63a6e190.js"><link rel="prefetch" href="/assets/js/43.c8072421.js"><link rel="prefetch" href="/assets/js/44.84cd8367.js"><link rel="prefetch" href="/assets/js/45.0ac810b0.js"><link rel="prefetch" href="/assets/js/46.bb83ff34.js"><link rel="prefetch" href="/assets/js/47.a9333a81.js"><link rel="prefetch" href="/assets/js/48.526b5494.js"><link rel="prefetch" href="/assets/js/49.73b61cc6.js"><link rel="prefetch" href="/assets/js/5.88b252c7.js"><link rel="prefetch" href="/assets/js/50.f34ab799.js"><link rel="prefetch" href="/assets/js/51.d06a49d9.js"><link rel="prefetch" href="/assets/js/52.348d5482.js"><link rel="prefetch" href="/assets/js/6.0face56b.js"><link rel="prefetch" href="/assets/js/7.31eca58d.js"><link rel="prefetch" href="/assets/js/8.69e9ce95.js"><link rel="prefetch" href="/assets/js/9.f25df9e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e1b3f17d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">yanyan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/html/001" class="sidebar-heading clickable"><span>HTML</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/css/image" class="sidebar-heading clickable"><span>CSS</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js/001" class="sidebar-heading clickable"><span>JS-基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-v8/001" class="sidebar-heading clickable"><span>JS-V8引擎原理 </span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-async/001" class="sidebar-heading clickable"><span>JS-异步I/O及异步编程</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/http/000" class="sidebar-heading clickable open"><span>HTTP</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/http/001.html" class="sidebar-link">01 HTTP 的特点？HTTP 的缺点</a></li><li><a href="/http/002.html" class="sidebar-link">02 说一说从输入URL到页面呈现发生了什么？——网络篇</a></li><li><a href="/http/003.html" class="active sidebar-link">03 说一说从输入URL到页面呈现发生了什么？——解析算法篇</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/http/003.html#构建-dom-树" class="sidebar-link">构建 DOM 树</a></li><li class="sidebar-sub-header"><a href="/http/003.html#样式计算" class="sidebar-link">样式计算</a></li><li class="sidebar-sub-header"><a href="/http/003.html#生成布局树" class="sidebar-link">生成布局树</a></li><li class="sidebar-sub-header"><a href="/http/003.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/http/004.html" class="sidebar-link">04 说一说从输入URL到页面呈现发生了什么？——渲染过程篇</a></li><li><a href="/http/005.html" class="sidebar-link">05 谈谈你对重绘和回流的理解</a></li><li><a href="/http/006.html" class="sidebar-link">06 XSS攻击</a></li><li><a href="/http/007.html" class="sidebar-link">07 CSRF攻击</a></li><li><a href="/http/008.html" class="sidebar-link">08 (传统RSA版本)HTTPS为什么让数据传输更安全</a></li><li><a href="/http/009.html" class="sidebar-link">09 Https TLS 1.2  1.3</a></li><li><a href="/http/010.html" class="sidebar-link">10 Cookie</a></li><li><a href="/http/011.html" class="sidebar-link">11 什么是跨域？浏览器如何拦截响应？如何解决</a></li><li><a href="/http/012.html" class="sidebar-link">12 Http2</a></li><li><a href="/http/013.html" class="sidebar-link">13 Http缓存</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/extend/002" class="sidebar-heading clickable"><span>拓展阅读</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="说一说从输入url到页面呈现发生了什么？-解析算法篇"><a href="#说一说从输入url到页面呈现发生了什么？-解析算法篇" class="header-anchor">#</a> 说一说从输入URL到页面呈现发生了什么？——解析算法篇</h1> <p>完成了网络请求和响应，如果响应头中Content-Type的值是text/html，那么接下来就是浏览器的解析和渲染工作了。</p> <p>首先来介绍解析部分，主要分为以下几个步骤:</p> <ul><li>构建 DOM树</li> <li>样式计算</li> <li>生成布局树(Layout Tree)</li></ul> <h2 id="构建-dom-树"><a href="#构建-dom-树" class="header-anchor">#</a> 构建 DOM 树</h2> <p>由于浏览器无法直接理解HTML字符串，因此将这一系列的字节流转换为一种有意义并且方便操作的数据结构，这种数据结构就是DOM树。DOM树本质上是一个以document为根节点的多叉树。</p> <p>那通过什么样的方式来进行解析呢？</p> <h3 id="html文法的本质"><a href="#html文法的本质" class="header-anchor">#</a> HTML文法的本质</h3> <p>首先，我们应该清楚把握一点: HTML 的文法并不是上下文无关文法。</p> <p>这里，有必要讨论一下什么是上下文无关文法。</p> <p>在计算机科学的编译原理学科中，有非常明确的定义:</p> <blockquote><p>若一个形式文法G = (N, Σ, P, S) 的产生式规则都取如下的形式：V-&gt;w，则叫上下文无关语法。其中 V∈N ，w∈(N∪Σ)* 。</p></blockquote> <p>其中把 G = (N, Σ, P, S) 中各个参量的意义解释一下:</p> <ol><li>N 是非终结符(顾名思义，就是说最后一个符号不是它, 下面同理)集合。</li> <li>Σ 是终结符集合。</li> <li>P 是开始符，它必须属于 N ，也就是非终结符。</li> <li>S 就是不同的产生式的集合。如 S -&gt; aSb 等等。</li></ol> <p>通俗一点讲，上下文无关的文法就是说这个文法中所有产生式的左边都是一个非终结符。</p> <p>看到这里，如果还有一点懵圈，我举个例子你就明白了。</p> <p>比如:</p> <div class="language- extra-class"><pre class="language-text"><code>A -&gt; B
</code></pre></div><p>这个文法中，每个产生式左边都会有一个非终结符，这就是上下文无关的文法。在这种情况下，xBy一定是可以规约出xAy的。
我们下面看看看一个反例：</p> <div class="language- extra-class"><pre class="language-text"><code>aA -&gt; B
Aa -&gt; B
</code></pre></div><p>这种情况就是不是上下文无关的文法，当遇到B的时候，我们不知道到底能不能规约出A，取决于左边或者右边是否有a存在，也就是说和上下文有关。</p> <p>关于它为什么是非上下文无关文法，首先需要让大家注意的是，规范的 HTML 语法，是符合上下文无关文法的，能够体现它非上下文无关的是不标准的语法。在此我仅举一个反例即可证明。</p> <p>比如解析器扫描到form标签的时候，上下文无关文法的处理方式是直接创建对应 form 的 DOM 对象，而真实的 HTML5 场景中却不是这样，解析器会查看 form 的上下文，如果这个 form 标签的父标签也是 form, 那么直接跳过当前的 form 标签，否则才创建 DOM 对象。</p> <p>常规的编程语言都是上下文无关的，而HTML却相反，也正是它非上下文无关的特性，决定了HTML Parser并不能使用常规编程语言的解析器来完成，需要另辟蹊径。</p> <h3 id="解析算法"><a href="#解析算法" class="header-anchor">#</a> 解析算法</h3> <p>HTML5 <a href="https://html.spec.whatwg.org/multipage/parsing.html" target="_blank" rel="noopener noreferrer">规范<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>详细地介绍了解析算法。这个算法分为两个阶段:</p> <ol><li>标记化。</li> <li>建树。</li></ol> <p>对应的两个过程就是词法分析和语法分析。</p> <h4 id="标记化算法"><a href="#标记化算法" class="header-anchor">#</a> 标记化算法</h4> <p>这个算法输入为HTML文本，输出为HTML标记，也成为标记生成器。其中运用有限自动状态机来完成。即在当前状态下，接收一个或多个字符，就会更新到下一个状态</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    Hello World
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>通过一个简单的例子来演示一下标记化的过程。
通过一个简单的例子来演示一下标记化的过程。</p> <p>遇到&lt;, 状态为标记打开。</p> <p>接收[a-z]的字符，会进入标记名称状态。</p> <p>这个状态一直保持，直到遇到&gt;，表示标记名称记录完成，这时候变为数据状态。</p> <p>接下来遇到body标签做同样的处理。</p> <p>这个时候html和body的标记都记录好了。</p> <p>现在来到&lt;body&gt;中的&gt;，进入数据状态，之后保持这样状态接收后面的字符hello World</p> <p>接着接收 &lt;/body&gt; 中的&lt;，回到标记打开, 接收下一个/后，这时候会创建一个end tag的token。</p> <p>随后进入标记名称状态, 遇到&gt;回到数据状态。</p> <p>接着以同样的样式处理 &lt;/body&gt;。</p> <h4 id="建树算法"><a href="#建树算法" class="header-anchor">#</a> 建树算法</h4> <p>接收到标记生成器传来的html标签，这时候状态变为before html状态。同时创建一个HTMLHtmlElement的 DOM 元素, 将其加到document根对象上，并进行压栈操作。</p> <p>接着状态自动变为before head, 此时从标记生成器那边传来body，表示并没有head, 这时候建树器会自动创建一个HTMLHeadElement并将其加入到DOM树中。</p> <p>现在进入到in head状态, 然后直接跳到after head。</p> <p>现在标记生成器传来了body标记，创建HTMLBodyElement, 插入到DOM树中，同时压入开放标记栈。</p> <p>接着状态变为in body，然后来接收后面一系列的字符: Hello World。接收到第一个字符的时候，会创建一个Text节点并把字符插入其中，然后把Text节点插入到 DOM 树中body元素的下面。随着不断接收后面的字符，这些字符会附在Text节点上。</p> <p>现在，标记生成器传过来一个body的结束标记，进入到after body状态。</p> <p>标记生成器最后传过来一个html的结束标记, 进入到after after body的状态，表示解析过程到此结束。</p> <h4 id="容错机制"><a href="#容错机制" class="header-anchor">#</a> 容错机制</h4> <p>讲到HTML5规范，就不得不说它强大的宽容策略, 容错能力非常强，虽然大家褒贬不一，不过我想作为一名资深的前端工程师，有必要知道HTML Parser在容错方面做了哪些事情。</p> <p>接下来是 WebKit 中一些经典的容错示例，发现有其他的也欢迎来补充。</p> <ol><li>使用&lt;/br&gt;而不是&lt;br&gt;</li></ol> <div class="language- extra-class"><pre class="language-text"><code>if (t-&gt;isCloseTag(brTag) &amp;&amp; m_document-&gt;inCompatMode()) {
  reportError(MalformedBRError);
  t-&gt;beginTag = true;
}
</code></pre></div><p>全部换为&lt;br&gt;的形式。</p> <ol start="2"><li>表格离散</li></ol> <div class="language- extra-class"><pre class="language-text"><code>&lt;table&gt;
  &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;inner table&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;tr&gt;&lt;td&gt;outer table&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre></div><p>WebKit会自动转换为:</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;table&gt;
    &lt;tr&gt;&lt;td&gt;outer table&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;table&gt;
    &lt;tr&gt;&lt;td&gt;inner table&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre></div><ol start="3"><li>表单元素嵌套
这时候直接忽略里面的form。</li></ol> <h2 id="样式计算"><a href="#样式计算" class="header-anchor">#</a> 样式计算</h2> <p>关于CSS样式，它的来源一般是三种</p> <ol><li>link标签引用</li> <li>style标签中的样式</li> <li>元素的内嵌style属性</li></ol> <h3 id="格式化样式表"><a href="#格式化样式表" class="header-anchor">#</a> 格式化样式表</h3> <p>首先，浏览器是无法直接识别 CSS 样式文本的，因此渲染引擎接收到 CSS 文本之后第一件事情就是将其转化为一个结构化的对象，即styleSheets。</p> <p>这个格式化的过程过于复杂，而且对于不同的浏览器会有不同的优化策略，这里就不展开了。</p> <p>在浏览器控制台能够通过document.styleSheets来查看这个最终的结构。当然，这个结构包含了以上三种CSS来源，为后面的样式操作提供了基础</p> <h3 id="标准化样式属性"><a href="#标准化样式属性" class="header-anchor">#</a> 标准化样式属性</h3> <p>有一些 CSS 样式的数值并不容易被渲染引擎所理解，因此需要在计算样式之前将它们标准化，如em-&gt;px,red-&gt;#ff0000,bold-&gt;700等等。</p> <h3 id="计算每个节点的具体样式"><a href="#计算每个节点的具体样式" class="header-anchor">#</a> 计算每个节点的具体样式</h3> <p>样式已经被格式化和标准化,接下来就可以计算每个节点的具体样式信息了。</p> <p>其实计算的方式也并不复杂，主要就是两个规则: 继承和层叠。</p> <p>每个子节点都会默认继承父节点的样式属性，如果父节点中没有找到，就会采用浏览器默认样式，也叫UserAgent样式。这就是继承规则，非常容易理解。</p> <p>然后是层叠规则，CSS 最大的特点在于它的层叠性，也就是最终的样式取决于各个属性共同作用的效果，甚至有很多诡异的层叠现象，看过《CSS世界》的同学应该对此深有体会，具体的层叠规则属于深入 CSS 语言的范畴，这里就不过多介绍了。</p> <p>不过值得注意的是，在计算完样式之后，所有的样式值会被挂在到window.computedStyle当中，也就是可以通过JS来获取计算后的样式，非常方便。</p> <h2 id="生成布局树"><a href="#生成布局树" class="header-anchor">#</a> 生成布局树</h2> <p>现在已经生成了DOM树和DOM样式，接下来要做的就是通过浏览器的布局系统确定元素的位置，也就是要生成一棵布局树(Layout Tree)。</p> <p>布局树生成的大致工作如下:</p> <ol><li>遍历生成的 DOM 树节点，并把他们添加到布局树中。</li> <li>计算布局树节点的坐标位置。
值得注意的是，这棵布局树值包含可见元素，对于 head标签和设置了display: none的元素，将不会被放入其中。
有人说首先会生成Render Tree，也就是渲染树，其实这还是 16 年之前的事情，现在 Chrome 团队已经做了大量的重构，已经没有生成Render Tree的过程了。而布局树的信息已经非常完善，完全拥有Render Tree的功能。</li></ol> <p>之所以不讲布局的细节，是因为它过于复杂，一一介绍会显得文章过于臃肿，不过大部分情况下我们只需要知道它所做的工作是什么即可，如果想深入其中的原理，知道它是如何来做的，我强烈推荐你去读一读人人FED团队的文章<a href="https://www.rrfed.com/2017/02/26/chrome-layout/" target="_blank" rel="noopener noreferrer">从Chrome源码看浏览器如何layout布局<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>梳理一下这一节的主要脉络:</p> <p><a data-fancybox="" title="result" href="/images/html-002.png"><img src="/images/html-002.png" alt="result"></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/http/002.html" class="prev">
        02 说一说从输入URL到页面呈现发生了什么？——网络篇
      </a></span> <span class="next"><a href="/http/004.html">
        04 说一说从输入URL到页面呈现发生了什么？——渲染过程篇
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e358a08d.js" defer></script><script src="/assets/js/2.88fa18d1.js" defer></script><script src="/assets/js/25.4c092e0a.js" defer></script>
  </body>
</html>
